
<script>export default {
  name: "BookInfoComment",
  props: ["id"],
  data() {
    return {
      totalPage: null,
      totalRecords: 0,
      bookComment: [],
      commentData: {
        readerid: '',
        bookid: '',
        comment: '',
        subtime: ''
      },
      showCommentData: {
        bookid: null,
        page: 1,
        size: 3
      }
    }
  },
  mounted() {
    this.commentData.readerid = sessionStorage.getItem('id')
  },
  watch: {
    id(newVal) {
      this.commentData.bookid = newVal
      this.showCommentData.bookid = newVal
      this.showBookComment()
      this.countCommentByBookid()
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.commentData.page = val
      this.showBookComment()
    },
    async countCommentByBookid() {
      const { data: res } = await this.$axios.get("/bookComment/countCommentByBookid", { params: { bookid: this.showCommentData.bookid } })
      if (res.data) {
        this.totalRecords = res.data
        this.totalPage = Math.ceil(res.data / this.showCommentData.size)
      }
    },
    async showBookComment() {
      const { data: res } = await this.$axios.get("/bookComment/showBookComment", {
        params: {
          bookid: this.showCommentData.bookid,
          size: this.showCommentData.size,
          page: this.showCommentData.page
        }
      })
      if (res.data) {
        this.bookComment = res.data
      }
    },
    async subComment() {
      this.commentData.subtime = new Date()
      try {
        const { data: res } = await this.$axios.post("/bookComment/addBookComment", this.commentData)
        console.log(res)
        if (res.success) {
          this.$message.success("评论成功")
          this.commentData.comment = ''  // 清空评论框

          // 如果后端返回的是布尔值 true，直接刷新评论列表
          if (res.data === true) {
            await this.showBookComment()
            await this.countCommentByBookid()
          } else {
            // 如果后端返回的是具体的评论数据，可以在这里处理
            this.bookComment.unshift(res.data)  // 将新评论添加到列表顶部
            this.totalPage = Math.ceil((this.bookComment.length + this.showCommentData.size - 1) / this.showCommentData.size)
          }
        } else {
          this.$message.error("评论失败，请稍后再试")
        }
      } catch (error) {
        console.error("发表评论失败:", error)
        this.$message.error("发表评论失败，请稍后再试")
      }
    }
  },
  filters: {
    formatter(val) {
      let date = new Date(val)
      return date.toLocaleString()
    }
  }
}
</script>

<template>
  <div>
    <el-input    style="margin: 10px auto"
                 type="textarea"
                 :autosize="{ minRows: 2, maxRows: 4}"
                 placeholder="请输入内容"
                 v-model="commentData.comment">
    </el-input>
    <el-button @click="subComment" type="primary">发表评论</el-button>

    <!-- 显示评论 -->
    <div class="commentList">
      <div style="color: black" class="comment" v-for="comment in bookComment">
        <el-card style="width: 100%;">
          <!-- 用户头像 -->
          <div style="display: flex; align-items: center;">
            <img
                style="width: 50px; height: 50px; border-radius: 50%; margin-right: 2%;"
                :src="comment.icon"
            />
            <!-- 评论内容 -->
            <div>
              <h5>{{ comment.realname }}</h5>
              <p>{{ comment.subtime | formatter }}</p>
              <p>{{ comment.comment }}</p>
            </div>
          </div>
        </el-card>
      </div>

      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="showCommentData.page"
          :page-size="showCommentData.size"
          layout="total, prev, pager, next, jumper"
          :total="totalRecords">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
</style>